  <template>
    <el-main>
      <div class="w-full flex flex-row gap-2 border-b-gray-300 border p-2">
          <el-input v-model="searchQuery" placeholder="动物名称" class="max-w-[200px]"></el-input>
          <el-select v-model="FilterType" placeholder="种类" style="width: 200px" v-if="USER.role==='3'||USER.role==='4'" >
            <el-option
                v-for="item in TypeOptions"
                :key="item"
                :label="item"
                :value="item"
            />
          </el-select>
          <el-select v-model="FilterStatus"  placeholder="档案状态" style="width: 200px" >
            <el-option
                v-for="item in statusoptions"
                :key="item.value"
                :label="item.label"
                :value="item.label"
            />
          </el-select>
        <div>
          <el-button type="success" @click="FilteranimalRecord">查询</el-button>
          <el-button type="danger" @click="FilterReset">重置</el-button>
        </div>
      </div>
      <el-table :data="animallist" style="width: 100%">
          <el-table-column prop="id" label="编号" width="200" />
          <el-table-column prop="name" label="名称" width="200"/>
          <el-table-column prop="type" label="类别"  width="200"/>
          <el-table-column prop="age" label="年龄" width="200" />
          <el-table-column prop="gender" label="性别" width="150"/>
          <el-table-column prop="startWeight" label="入园体重"  width="150"/>
          <el-table-column prop="nowWeight" label="当前体重" width="200"/>
          <el-table-column prop="keeperId" label="饲养员编号"  width="200"/>
          <el-table-column prop="createTime" label="入园时间" width="200" />
          <el-table-column prop="endTime" label="封档时间" width="200"  />
          <el-table-column fixed="right" label="记录"   >
          <template #default="scope" >
            <div class="flex flex-row gap-1 w-fit">
                <button class="bg-red-500 text-white px-2 py-1 rounded-md hover:bg-red-600" @click="handleFeedRecords(scope.row)">饲养记录</button>
              <button class="bg-element-green text-white px-2 py-1 rounded-md hover:bg-element-hover-green" @click="handleMedicalRecords(scope.row)">医疗记录</button>
                <el-popconfirm
                        confirm-button-text="是"
                        cancel-button-text="否"
                        icon-color="#626AEF"
                        title="您确认要封档吗？"
                        @confirm="SealUp(scope.row)"
                        :popper-style="{ width: '200px', height: '80px' }"
                >
                    <template #reference>
                        <button v-if="scope.row.endTime==null||scope.row.endTime==''" class="bg-blue-500 text-white px-6 py-1 rounded-md hover:bg-blue-300"  @click="">封档</button>
                        <el-button v-if="scope.row.endTime" type="info" disabled @click="">已封档</el-button>
                    </template>
                </el-popconfirm>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 封档窗口-->
      <el-dialog v-model="isFlag.dialogVisbaleSeelUp"  title="封档" width="1000" center>
        <el-form>
        <el-form-item label="封档日期:" label-width="80px">
            <el-date-picker
                format="YYYY/MM/DD" value-format="YYYY-MM-DD" type="date"
                v-model="handleEndTime.endTime"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="">取消</el-button>
            <el-button type="primary" @click="SaveSealUp()">确定</el-button>
          </div>
        </template>
      </el-dialog>

        <!-- 投喂记录窗口-->
        <el-dialog v-model="isFlag.dialogVisbaleFeed"  title="投喂记录" width="2000" center>
            <el-table :data="feedRecordlist" style="width: 100%">
                <el-table-column prop="feed.id" label="编号"  />
                <el-table-column prop="animal.name" label="名称" />
                <el-table-column prop="animal.type" label="类别"  />
                <el-table-column prop="animal.age" label="年龄" />
                <el-table-column prop="animal.gender" label="性别" />
                <el-table-column prop="animal.nowWeight" label="当前体重" />
                <el-table-column prop="keepername" label="饲养员" />
                <el-table-column prop="feed.foodName" label="食物名称" />
                <el-table-column prop="feed.foodWeigh" label="食物重量/kg" />
                <el-table-column prop="feed.animalAddWeigh" label="增加体重" />

            </el-table>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="isFlag.dialogVisbaleFeed = false">取消</el-button>
                    <el-button type="primary" @click="">确定</el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 医疗记录窗口-->
        <el-dialog v-model="isFlag.dialogVisbaleMedical"  title="医疗记录" width="2000" center>
            <el-table :data="MedicalRecordlist" style="width: 100%">
                <el-table-column prop="animal.id" label="编号"  />
                <el-table-column prop="animal.name" label="名称" />
                <el-table-column prop="animal.type" label="类别"  />
                <el-table-column prop="animal.age" label="年龄" />
                <el-table-column prop="animal.gender" label="性别" />
                <el-table-column prop="medical.applicationStatus" label="处理状态" />
                <el-table-column prop="medical.applicationTitle" label="申请主题" />
                <el-table-column prop="doctorname" label="医生" />
            </el-table>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="isFlag.dialogVisbaleMedical = false">取消</el-button>
                    <el-button type="primary" @click="">确定</el-button>
                </div>
            </template>
        </el-dialog>
    </el-main>
  </template>
  <script setup lang="ts">
  import {onMounted, ref,reactive} from "vue";
  import axios from "axios";
  import {ElMessage, valueEquals} from "element-plus";

  const animallist = ref([])
  const feedRecordlist=ref([])
  const filteredList=ref([])
  const searchQuery = ref();
  const FilterStatus =ref();
  const FilterType =ref();
  let currentAnimal=ref();
  const handleEndTime=reactive({
    endTime:'',
  })
  const MedicalRecordlist=ref([])
  const isFlag = reactive({
      dialogVisbaleFeed: false,
      dialogVisbaleMedical:false,
      dialogVisbaleSeelUp:false,
  })
  const TypeOptions = ref({})
  const statusoptions = [
    {
      value:'正常',
      label:'正常',
    },
    {
      value:'已封档',
      label:'已封档',
    },
  ]
  const USER=JSON.parse(localStorage.getItem('user'));
  function init(){
    console.log(USER.id)
    axios.get('http://localhost:8080/animal/getlist/byuserid?id='+USER.id)
        .then(request =>{
            animallist.value = request.data
          filteredList.value = request.data
          console.log(animallist);
        })

    axios.get('http://localhost:8080/animal/gettype')
        .then(request =>{
          console.log(request.data)
          TypeOptions.value=request.data;
          console.log(TypeOptions)
        })
    console.log("测试执行")
  }

  onMounted(()=>{
    init()
  })
  function handleFeedRecords(animal) {
    isFlag.dialogVisbaleFeed = true;
    axios.get('http://localhost:8080/feed/getlist')
        .then(request => {
          feedRecordlist.value = request.data;
          feedRecordlist.value = feedRecordlist.value.filter(item =>  item.animal && item.animal.id === animal.id);
          console.log(feedRecordlist);
        })
        .catch(error => {
          console.error('获取饲养记录列表时出错:', error);
        });
  }
  function handleMedicalRecords(animal){
    isFlag.dialogVisbaleMedical = true
    axios.get('http://localhost:8080/medical/getlist')
        .then(request => {
          MedicalRecordlist.value = request.data;
          console.log(MedicalRecordlist);
          MedicalRecordlist.value = MedicalRecordlist.value.filter(item =>  item.animal && item.animal.id === animal.id);
          console.log(MedicalRecordlist)
        })
        .catch(error => {
          console.error('获取医疗记录列表时出错:', error);
        });
  }
  function FilteranimalRecord (){
    axios.get('http://localhost:8080/animal/getlist')
        .then(request =>{
          filteredList.value = request.data
          console.log(animallist);
          if(FilterType.value!=null){
            filteredList.value=filteredList.value.filter(item =>item.type && item.type == FilterType.value)
            console.log(FilterType.value)
          }
          if(FilterStatus.value=="已封档"){
            filteredList.value=filteredList.value.filter(item =>item.endTime && item.endTime !='')
          }
          if(FilterStatus.value=="正常"){
            filteredList.value=filteredList.value.filter(item =>item.endTime ==''|| !item.endTime)
          }
          console.log(animallist)

          if(searchQuery.value!=null){
            filteredList.value=filteredList.value.filter(item => {
              return item.name.includes(searchQuery.value);
            });}
          animallist.value=filteredList.value;
        })
    console.log(filteredList)

  }
  function SealUp(animal){
    currentAnimal.value=null;
    currentAnimal=animal;
    console.log(animal);
    handleEndTime.endTime='';
    isFlag.dialogVisbaleSeelUp=true;
  }
  function SaveSealUp(){
    currentAnimal.endTime=handleEndTime.endTime;
    axios.post('http://localhost:8080/animal/update',currentAnimal)
        .then(request =>{
          console.log(request.data)
          if (request.data){
            ElMessage({
              message:'修改成功',
              type:'success'
            })
            isFlag.dialogVisbaleSeelUp=false;
          }
        })
  }

  function FilterReset(){
    location.reload();
  }

  </script>
